<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>查看</title>
  <!--element-ui的样式-->
  <link rel="stylesheet" href="plugins/element-ui/index.css"/>
</head>
<body>

<div id="app">

  <input v-model="path" type="text"/>
  <el-button type="success" @click="btnLook()">展示文件夹中所有图片(jpg&png格式)</el-button>

  <div class="block" v-for="photo in photos">
    <span class="demonstration">图片名：{{ photo.name }}</span>
    <el-image
        style="width: 200px; height: 200px"
        :src="`http://localhost:8081/file/download?name=${photo.name}`">
    </el-image>
  </div>

</div>


<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="plugins/axios/axios.min.js"></script>
<!--api-->
<script src="api/file.js"></script>

<script>
  new Vue({
    el:"#app",
    data(){
      return {
        path:"",
        photos:[],
      }
    },
    created(){
      const photos = window.localStorage.getItem('photo')
      if (photos){
        this.photos=JSON.parse(photos)
      }else{
        this.$message.error("文件夹下无图片")
      }
    },
    methods:{
      async btnLook() {
        if (this.path !== "") {
          let res = await lookApi({path: this.path});
          console.log(res)
          if (res.data.code===1){
            //更新路径
            await updateUrlApi({url : this.path})
            localStorage.setItem('photo', JSON.stringify(res.data.data))
            location.reload()
          }else {
            this.$message.error("路径错误或者不存在")
          }
        } else {
          this.$message.error("请输入路径")
        }
      },

    }
  })
</script>

</body>
</html>